import React, { useState, useEffect } from 'react';
import {
  Button, Space, Table, Tag, Drawer, Cascader,
  DatePicker,
  Form,
  Tree,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  message,
  TreeSelect,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import "./Deduct.scss";
// import * as service from "../../../api/Deduct";
import { deduct_list,deduct_add,deduct_bianji,deduct_delete } from "../../../api/Deduct";
import { SizeType } from 'antd/es/config-provider/SizeContext';

interface Props {

}

interface DataType {
  deductId:number;
  month: string;
  education: string;
  houseRent: string;
  interest: string;
  support: string;
  educate: string;
  baby: string;

}

// 这是专项附加扣除页面
function Deduct(props: Props) {

  const { Option } = Select;
  let [form] = Form.useForm() //定义表单
  let [dataType, setDataType] = useState<DataType[]>([]) //定义表格组件状态--数据
  let [flag, setFlag] = useState(true)//自定义一个开关
  let [deductId, setid] = useState(0)

  //控制抽屉的显示隐藏
  const [open, setOpen] = useState(false);//定义抽屉开关初始值

  // 抽屉关闭时触发 
  const onClose = () => {
    setOpen(false);
    form.setFieldsValue({month:'',education:'',Houserent:'',interest:'',support:'',educate:'',baby:''})
  }

  var hergrg = async () => {
    var res = await deduct_list()
    console.log(res.data);
    setDataType(res.data.data)
  }
  useEffect(() => {
    hergrg()
  }, [])

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      // dataIndex: 'name',
      key: 'name',
      width: '120px',
      render: (_, record) => <a>{dataType.indexOf(record) + 1}</a>,
    },
    {
      title: '申报月份',
      // dataIndex: 'age',
      key: 'month',
      width: '120px',
      render: (_, record) => <div>{record.month}</div>
    },
    {
      title: '累计子女教育',
      // dataIndex: 'address',
      key: 'education',
      width: '150px',
      render: (_, record) => <div>{record.education}</div>
    },
    {
      title: '累计住房租金',
      // dataIndex: 'address',
      key: 'houseRent',
      width: '150px',
      render: (_, record) => <div>{record.houseRent}</div>
    },
    {
      title: '累计住房贷款利息',
      // dataIndex: 'address',
      key: 'interest',
      width: '170px',
      // text-aligin:center,
      render: (_, record) => <div>{record.interest}</div>

    },
    {
      title: '累计赡养老人',
      // dataIndex: 'address',
      key: 'support',
      width: '130px',
      render: (_, record) => <div>{record.support}</div>

    },
    {
      title: '累计继续教育',
      // dataIndex: 'address',
      key: 'educate',
      width: '150px',
      render: (_, record) => <div>{record.educate}</div>

    },
    {
      title: '累计3岁以下婴儿呵护',
      // dataIndex: 'address',
      key: 'baby',
      width: '200px',
      render: (_, record) => <div>{record.baby}</div>

    },
    {
      title: '操作',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, record) => {
        return <>
          <Button onClick={()=>{ edit(record)}}>编辑</Button>
          <Button onClick={()=>{detel(record.deductId)}} >删除</Button>
        </>
      }
    },
  ];

  const  onFinish =async(value:any)=>{
      if(flag){
          let res=await deduct_add(value)
          console.log(res);
          hergrg()
          setOpen(false)
          message.success({content:'新增成功'})
      }else{
        let jiegouzhi={deductId,...value}
        let res=await deduct_bianji(jiegouzhi)
        console.log(res);
        hergrg()
        setOpen(false)
        message.success({content:'编辑成功'})
        
      }
  }
  let detel=async(deductId:number)=>{
    let res=await deduct_delete({deductId})
        hergrg()
        message.success({content:'删除成功'})
  }
const onFinishFailed=(errorInfo: any) => {
  console.log(errorInfo)
  // 新增增加按钮
 
}
let newAdd= async()=>{
  setOpen(true)
  setFlag(true)
}
//编辑数据
var edit=(item: any) => {
  console.log(item)
  setOpen(true)
  setFlag(false)
  let { deductId, ...newarr } = item
  setid(deductId)
  form.setFieldsValue(newarr)
}
  return (
    <div className='box'>
      <div className='texts'>
        <p style={{ color: '#000', fontWeight:"700",fontSize:"20px" }}>专项附加扣除明细</p>
      </div>
      <div className='buton'>
        <span>
          <Button type="primary" onClick={()=>{newAdd()}}>增加</Button>
        </span>
        <span>

        </span>
      </div>
      <div>
        <Table columns={columns} dataSource={dataType} />
      </div>
      <>
        <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
          <Form
            form={form}
            // name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 400 }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item label="月份更新"
              name="month">
              <Input />
            </Form.Item>

            <Form.Item
              label="租金"
              name="education">
              <Input />
            </Form.Item>

            <Form.Item label="教育费用"
              name="houseRent">
              <Input />
            </Form.Item>

            <Form.Item label="教育累计住房贷款利息费用"
              name="interest">
              <Input />
            </Form.Item>
            <Form.Item label="累计赡养老人	"
              name="support">
              <Input />
            </Form.Item>
            <Form.Item label="累计继续教育	"
              name="educate">
              <Input />
            </Form.Item>
            <Form.Item label="累计3岁以下婴儿呵护	"
              name="baby">
              <Input />
            </Form.Item>

            <Form.Item label="更新列表">
              <Button type="primary" htmlType="submit">更新</Button>
            </Form.Item>
          </Form>
        </Drawer>
      </>



    </div>
  );

}
export default Deduct;